<template>
  <div class="login">
    <!-- 顶部 -->
    <van-nav-bar
      title="面经登录"
      left-text="返回"
      right-text="取消"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      class="transparent-nav"
    />

    <!-- 登录表单 -->
    <div class="form-container">
      <van-form ref="form" @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="请输入用户名"
          :rules="rules.username"
          class="glass-input"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="rules.password"
          class="glass-input"
        />
        <div style="margin: 32px 16px 16px">
          <van-button
            block
            type="primary"
            native-type="submit"
            class="gradient-button"
          >
            立即登录
          </van-button>
        </div>
        <div class="switch-link">
          <router-link to="/register">
            <span>还没有账号？</span>
            <span class="highlight">立即注册</span>
          </router-link>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { login } from '@/api/user'
import { setToken } from '@/utils/storage'

export default {
  data () {
    return {
      username: '',
      password: '',
      rules: {
        username: [
          { required: true, message: '请填写用户名' },
          { min: 5, max: 12, message: '长度在 5到 12 个字符' }
        ],
        password: [
          { required: true, message: '请填写密码' },
          { pattern: /^[a-zA-Z0-9]{6,20}$/, message: '密码必须为6-20位字母或数字' }
        ]
      }
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      Toast.fail('取消登录')
      this.$router.push({ path: 'article' })
    },
    async onSubmit () {
      try {
        await this.$refs.form.validate()
        this.$toast.loading('登录中...')

        const response = await login({
          username: this.username,
          password: this.password
        })

        const token = response.data.token
        setToken(token)
        this.$toast.success('登录成功')
        this.$router.push({ path: '/' })
      } catch (error) {
        this.$toast.clear()
      }
    }
  }
}
</script>

<style scoped lang="less">
.login {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/karina2.png') center/cover no-repeat;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      rgba(135, 206, 235, 0.15) 0%,
      rgba(176, 224, 230, 0.1) 25%,
      rgba(255, 182, 193, 0.08) 50%,
      rgba(221, 160, 221, 0.12) 75%,
      rgba(255, 218, 185, 0.1) 100%
    );
    backdrop-filter: blur(1px);
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(
        circle at 20% 30%,
        rgba(255, 255, 255, 0.12) 0%,
        transparent 60%
      ),
      radial-gradient(
        circle at 80% 70%,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 50%
      );
  }
}

.transparent-nav {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(1px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  :deep(.van-nav-bar__title),
  :deep(.van-nav-bar__text),
  :deep(.van-icon) {
    color: rgba(255, 255, 255, 0.9) !important;
  }
}

.form-container {
  position: relative;
  z-index: 10;
  margin: 20vh 20px 0;
  padding: 30px 20px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(1px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.glass-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  margin-bottom: 16px;
  backdrop-filter: blur(1px);
  transition: all 0.3s ease;

  &:focus-within {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  }

  :deep(.van-field__label),
  :deep(.van-field__control) {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  :deep(.van-field__control::placeholder) {
    color: rgba(255, 255, 255, 0.6) !important;
  }
}

.gradient-button {
  background: linear-gradient(
    135deg,
    rgba(135, 206, 235, 0.8) 0%,
    rgba(176, 224, 230, 0.8) 100%
  ) !important;
  border: none !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(135, 206, 235, 0.3);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2px);
    box-shadow: 0 2px 10px rgba(135, 206, 235, 0.4);
  }
}

.switch-link {
  text-align: center;
  margin-top: 20px;

  a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
  }

  .highlight {
    color: rgba(135, 206, 235, 0.9);
    font-weight: 600;
    margin-left: 4px;
  }

  &:hover {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
}
</style>
